<template>
  <bc-modal v-show="show" ref='modal'>
    <slide-up :show="show">
      <div class="bank-select" ref="contents">
        <div 
          @click="chooseBankName(item.content, index)"
          class="bank-name"
          :class="activeIndex == index ? 'active' : ''"
          v-for="(item, index) in dataList" 
          :key="item.id">
          {{item.content}}
        </div>
      </div>
    </slide-up>
  </bc-modal>
</template>

<script>
import SlideUp from '@/components/slide-up/slide-up'
import Switches from '@/components/base/switches/switches'
import BcModal from '@/components/base/bc-modal/bc-modal'
export default {
  components: {
    SlideUp,
    Switches,
    BcModal 
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            name: '中国农业银行'
          },
          {
            id: 2,
            name: '中国建设银行'
          },
          {
            id: 3,
            name: '中国银行'
          },
          {
            id: 4,
            name: '招商银行'
          },
          {
            id: 5,
            name: '交通银行'
          },
          {
            id: 6,
            name: '邮政储蓄银行'
          },
          {
            id: 7,
            name: '中国民生银行'
          },
          {
            id: 8,
            name: '中国工商银行'
          },
        ]
      }
    }
  },
  data() {
    return {
      activeIndex: -1
    }
  },
  mounted() {
    this.contents = this.$refs.contents 
    this.modal = this.$refs.modal.$el 
    this.modal.addEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
        this.$emit('hide')
      }
    })
  },
  destroyed() {
    this.modal.removeEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
        this.$emit('hide')
      }
    })
  },
  methods: {
    chooseBankName(name, index) {
      this.activeIndex = index 
      this.$emit('click', name)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .bank-select 
      .bank-name 
        margin-bottom 20px
        text-align center
        font-size 15px 
        &.active 
          color $color-theme-red 
</style>